<template>
    <div class="hotel-main">
        <div>
            <div class="d-flex justify-content" style="padding: 10px;">

                <div class="d-flex align-items-center ml-5 mr-5">
                    <p style="white-space: nowrap" class="mr-5 font-16">车主名：</p>
                    <el-input v-model="nickname" placeholder="请输入车主名"></el-input>
                </div>
                <div class="d-flex align-items-center ml-5 mr-5">
                    <p style="white-space: nowrap" class="mr-5 font-16">车牌号：</p>
                    <el-input v-model="carLicense" placeholder="请输入车牌号"></el-input>
                </div>
<!--                <el-button type="primary" @click="getUserList" size="mini" >查询</el-button>-->
<!--                <el-button type="warning"  @click="resetForm" size="mini" >重置</el-button>-->
                <div class="d-flex align-items-center ml-5 mr-5">
                    <el-button type="primary" @click="getUserList">查询</el-button>
                    <el-button type="danger" @click="resetForm">重置</el-button>
                </div>
            </div>
            <div class="d-flex justify-content-end" style="padding: 10px;">
                <el-button type="primary" style="width: 100px;" @click="addUser">添加</el-button>
            </div>

            <el-table
                    stripe
                    size="small "
                    :data="hotelData"
                    style="width: 100%"
                    border>
                <el-table-column
                        type="index"
                        label="序号"
                        width="60"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="carLicense"
                        label="车牌号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="车主"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号"
                        width="200">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="240"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleCheck(scope.$index, scope.row)">查看
                        </el-button>
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleModify(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <el-pagination
                class="mb-15"
                background
                @current-change="handleCurrentChange"
                @prev-click="prevPage"
                @next-click="nextPage"
                layout="prev, pager, next"
                :total="pageNum">
        </el-pagination>


        <!-- 弹出框 -->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="570px">
            <div class="content">
                <!--                <div class="d-flex align-items-center mb-15">-->
                <!--                    <p class="w-100 text-left">部门:</p>-->
                <!--                    <el-cascader ref="cascader"-->
                <!--                                 style="width: 350px;"-->
                <!--                                 v-model="form.dept"-->
                <!--                                 :disabled="userValue == 'check'"-->
                <!--                                 :options="deptList"-->
                <!--                                 :props="{-->
                <!--                         checkStrictly: true,-->
                <!--                         expandTrigger: 'hover',-->
                <!--                         emitPath: false,-->
                <!--                         value: 'id',-->
                <!--                         label: 'name'-->
                <!--                       }">-->
                <!--                        <template slot-scope="{ node, data }">-->
                <!--                            <div @click="cascaderClick(data)">-->
                <!--                                <span>{{ data.name }}</span>-->
                <!--                                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>-->
                <!--                            </div>-->
                <!--                        </template>-->
                <!--                    </el-cascader>-->

                <!--                </div>-->
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">车牌号:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入车牌号"
                            v-model="form.license"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">身份证号:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入身份证号"
                            v-model="form.certNo"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm" v-if="userValue != 'check'">确 定</el-button>
        </span>
        </el-dialog>

    </div>

</template>

<script>
    import {get, post} from "../utils/request";

    export default {
        name: "MenuManage",
        data() {
            return {
                username: undefined,
                nickname: undefined,
                deptList: undefined,
                carLicense:'',
                options: [{
                    value: 'admin',
                    label: '管理员'
                }, {
                    value: 'user',
                    label: '业主'
                }],
                statusOptions:[{
                    value: 0,
                    label: '禁用'
                },{
                    value: 1,
                    label: '启用'
                }],
                name: '',
                address: undefined,
                hotelData: [],
                title: '',
                page: '',
                departData: '',
                hotelName: '',
                hotelAddress: '',
                userValue: '',
                hotelId: '',
                deptId: '',
                parking: '',
                pageNum: 0,
                dialogVisible: false,
                userList: [],
                role:'',
                tempPassword: undefined,
                form: {
                   id:'',
                    name:'',
                    path:'',
                    status:'',
                    role:'',

                }
            }
        },
        methods: {
            //获取用户列表
            getUserList() {
                let data = {
                    page: {
                        page: 1,
                        size: 10
                    },
                    carLicense: this.carLicense,
                    nickname:this.nickname
                }
                let dept = {}
                //获取用户列表
                this.userListRequest(data)
            },

            //获取用户列表请求
            userListRequest(data) {
                post('/api/license/page', data)
                    .then(res => {
                        console.log(res);
                        this.hotelData = res.data.data.records
                        this.pageNum = res.data.data.total
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            //删除用户方法
            handleDelete(index, row) {
                get('/api/menu/delete/' + row.id)
                    .then(res => {
                        console.log(res);
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        setTimeout(() => {
                            this.$router.go(0)
                        }, 1000)
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            resetForm(){
                this.role=''
                let data = {
                    page: {
                        page: 1,
                        size: 10
                    },
                }

                this.userListRequest(data)
            },


            //增加用户方法
            addUser() {
                this.form = {}
                this.dialogVisible = true
                this.title = '添加菜单'
                this.userValue = 'add'
            },

            handleCheck(index, row) {
                this.userValue = 'check'
                this.dialogVisible = true
                this.title = '查看菜单信息'
                this.form = row
            },

            //修改用户信息
            handleModify(index, row) {
                console.log(index);
                console.log(row);
                this.form = row
                this.tempPassword = this.form.password
                this.dialogVisible = true
                this.title = '修改菜单信息'
                this.userValue = 'modify'
            },

            //
            confirm() {
                let value = this.userValue
                let data = {
                    license:this.form.license,
                    certNo:this.form.certNo
                }
                if (value == 'add') {
                    this.userRequest(value, data)
                } else if (value == 'modify') {
                    data.id = this.form.id
                    if (this.tempPassword == this.form.password) {
                        this.form.password = undefined
                    }
                    // data.deptId = this.deptId
                    this.userRequest(value, data)
                }
            },

            //请求方法
            userRequest(url, data) {
                post('/api/license/' + url, data)
                    .then(res => {
                        console.log(res);
                        if (res.data.code === "200") {
                            this.$message({
                                message: '操作成功！',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.go(0);
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning',
                                duration: 1000
                            });

                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            //选择页码
            handleCurrentChange(num) {
                let data = {
                    page: {
                        page: num,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                this.userListRequest(data)
            },

            //上一页
            prevPage(num) {
                let data = {
                    page: {
                        page: num,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                this.userListRequest(data)

            },

            //下一页
            nextPage(num) {
                let data = {
                    page: {
                        page: num,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                this.userListRequest(data)
            },


        },
        mounted() {

            this.getUserList()
        },

    }
</script>

<style scoped>
    .hotel-main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);
    }
</style>
